<template>
  <div class="TitleBottom">
    <ul>
      <li>
        <div class="imgs">
          <img
            src="../assets/imgs/bottomicon1.png"
            width="100%"
            height="100%"
            alt=""
          />
        </div>
        <div class="title">
          <span>服务学校</span>
          <div>192所</div>
        </div>
      </li>
      <li>
        <div class="imgs">
          <img
            src="../assets/imgs/bottomicon2.png"
            width="100%"
            height="100%"
            alt=""
          />
        </div>
        <div class="title">
          <span>服务学校</span>
          <div>192所</div>
        </div>
      </li>
      <li>
        <div class="imgs">
          <img
            src="../assets/imgs/bottomicon3.png"
            width="100%"
            height="100%"
            alt=""
          />
        </div>
        <div class="title">
          <span>服务学校</span>
          <div>192所</div>
        </div>
      </li>
      <li>
        <div class="imgs">
          <img
            src="../assets/imgs/bottomicon4.png"
            width="100%"
            height="100%"
            alt=""
          />
        </div>
        <div class="title">
          <span>服务学校</span>
          <div>192所</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TitleBottom",
};
</script>

<style>
.TitleBottom {
  width: 50%;
  /* margin: auto; */
  margin-left: 10%;
}
.TitleBottom ul {
  display: flex;
  /* width: 200px; */
}
.TitleBottom ul li {
  padding: 20px;
  display: flex;
}
.TitleBottom .imgs {
  width: 50px;
  height: 50px;
}
.TitleBottom .title {
  width: 100px;
}
.TitleBottom .title span {
  color: rgb(36, 161, 206);
}
.TitleBottom .title div {
  color: #fff;
}
</style>